<style lang="less">
    .no-cart{
        padding:30px 0;
        font-size:18px;
        color:#BFBFBF;
        text-align: center;
        position: relative;
        margin-top:30px;
        .icon-gouwuche11{
            font-size:30px!important;
        }

    }
    .bianji{
      position: fixed;
      top:5px;
      right:10px;
      padding:0 3px;
      font-size:14px;
      color:#909399;
      .icon-bianji{
        color: #909399;
      }
    }
    .deletebtn{
        color: #F44;
        font-size: 15px;
        padding:5px;
        display: inline-block;
        text-align: center;
        /*border:1px solid;*/
        position: absolute;
        top:20%;
        right:5px;
    }
    .cart{
        .carbox{
            position: relative;
            background: #fff;
            padding:10px;
            padding-left: 120px;
            height: 90px;
            border:1px solid #DEDEDE;
            margin:5px 0;
            border-radius: 3px;
            .before{
                width:20px; height: 90px; background: rgba(250,250,250,0);
                position: absolute;
                z-index: 1;
                left: 10px; top:10px;
            }
            .checkbox{
                position: absolute;
                left:10px;
                top:10px;
                line-height: 90px;
                .van-stepper__input{
                    font:caption;
                }
            }
            .img{
                width :70px; height:90px; display: block;
                position: absolute;
                left:40px; top:10px;
            }
            .title{
                 font-size:14px; color:#606266;
            }
            .spec{
                font-size: 12px; color: #909399;
            }
            .price{
                position: absolute;
                bottom: 10px; left:120px;
                font-size: 12px; color:#F56C6C;
                font-family: Arial;
                i{
                    font-size: 16px;
                    font-style: normal;
                }
            }
            .stepper{
                position: absolute;
                bottom: 10px; right:10px;
            }
        }
    }

</style>
<template>
    <div class="cart" v-loading="loading">
        <!--<div class="bianji" @click="deleteCart">-->
            <!--<i class="iconfont icon-bianji"></i> 编辑-->
        <!--</div>-->
        <div class="no-cart" v-if="!data.length">
            <i class="iconfont icon-gouwuche11"></i> <span>购物车还是空的</span>
        </div>
        <div v-else style="padding:5px;">
            <van-swipe-cell  :right-width="65" v-for="(item,key) in data" :key="item.buyer_id+key">
                <div class="carbox">
                    <div style="height:100%;" @click="item.checked = !item.checked">
                        <div class="before"></div>
                        <van-checkbox class="checkbox" v-model="item.checked"></van-checkbox>
                        <img class="img" :src="imgurl(item.item)">
                        <p class="title">{{item.item.goods.title}}</p>
                        <p class="spec">
                            <span v-for="(value,key) in item.item.spec_data" :key="key">
                                {{key}} : {{value}}
                            </span>
                        </p>
                        <span class="price">￥<i>{{item.item.price}}</i></span>
                    </div>
                    <van-stepper class="stepper" @change="changecount(item)" v-model="item.count" integer :min="1" :max="40"/>
                  <i  class="iconfont icon-delete deletebtn" @click="removecar(item,key)"></i>
                </div>

            </van-swipe-cell>
            <van-submit-bar
                :price="sum_price"
                button-text="提交订单"
                :disabled="!data.filter(f => f.checked).length"
                @submit="onSubmit">
                <van-checkbox v-model="checkedall" style="margin-left:10px;">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>

<script>
    import { mapState,mapActions } from 'vuex';
    import axios from 'axios';
    export default {
        name: "cart",
        data() {
            return {

            }
        },
        methods: {
          deleteCart (){
            console.log(1)
          },
			imgurl (data){
				if(data.goods.images != ''){
					return this.$http.IMGURL + data.goods.images;
				}else if(data.images != ''){
					return this.$http.IMGURL + data.images;
				}else{
					return 'http://res2.esf.leju.com/esf_www/statics/images/default-img/detail.png';
				}
			},
            // 结算
            onSubmit() {
				this.$store.commit('shop/buynow',0)
                this.$router.push({name:'shop_payment'})
            },
            // 加减
            changecount(item){
                this.$http.order.put('shop/cart/'+item.id,{
                    store_id:item.store_id,
                    item_id:item.item_id,
                    market_price:item.market_price,
                    count:item.count
                }).then(res => {
                    if(!res.data.code){

                    }else{

                    }
                })
            },
            // 删除确认
            removecar(item,index){
                this.$dialog.confirm({
                    title: '删除',
                    message: '确认删除该条商品'
                }).then(() => {
                    this.$http.order.delete('shop/cart/'+item.id).then(res => {
                        if(!res.data.code){
                            this.$message.success('删除成功')
                            this.data.splice(index, 1);
                        }else{
                            this.$message.error('删除失败,'+res.data.message);
                        }
                    })
                });
            }
        },
        computed: {
            loading(){
                return this.$store.state.shop.carloading;
            },
            data(){
                return this.$store.state.shop.cardata;
            },
            sum_price(){
                let a = 0;
                this.data.map(m => {
                    if(m.checked){
                        a += m.count * m.item.price
                    }
                })
                return a*100;
            },
            checkedall : {
                get(){
                    return this.data.filter(f => f.checked).length == this.data.length
                },
                set(value){
                    if(value){
                        this.data.map(i => {
                            i.checked = true
                        })
                    }else{
                        this.data.map(i => {
                            i.checked = false
                        })
                    }
                }
            }

        },
        mounted(){

        },
        created(){
            this.$store.dispatch('shop/initshopcar');
        }
    }
</script>

